<style lang="scss" scoped>
  .commonecharts_body {
    .echart_container_screem4 {
      width: 3.958vw;
      height:  3.958vw;
      margin: 2.083vw  0.937vm 0;
      box-sizing: content-box;
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container_screem4">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: ['garbageRatio'],
    mounted() {
      this.initEcharts()
    },
    watch: {
      'garbageRatio': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    methods: {
      initEcharts() {

        let that = this;
        const myChart = echarts.init(document.querySelectorAll('.echart_container_screem4')[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14 * (document.body.clientWidth  / 1920)
            },
            formatter: '{b}: <br/>{d}%'
//            formatter: function (pramas) {
//              console.log(pramas)
//              return 'a'
//            }
          },
//          legend: {
//            orient: 'vertical',
//            right: 20,
//            top:60,
//            data: ['可回收垃圾', '厨余垃圾', '有害垃圾', '其他垃圾'],
//            textStyle: {
//              color: '#728088'
//            }
//          },
//          title:{
//            text:"垃圾占比",
//            left:"25%",
//            top:"44%",
//            textStyle:{
//              color:"#728088",
//              fontSize:16,
//            }
//          },
          series: [
            {
              name: '',
              hoverAnimation: false,
              type: 'pie',
              radius: ['82%', '100%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: this.garbageRatio.recyclable, name: '可回收垃圾',itemStyle:{color:"#527ACE"}},
                {value: this.garbageRatio.kitchenWaste, name: '厨余垃圾',itemStyle:{color:"#E4B62D"}},
                {value: this.garbageRatio.harmful, name: '有害垃圾',itemStyle:{color:"#A74E18"}},
                {value: this.garbageRatio.other, name: '其他垃圾',itemStyle:{color:"#5BC19C"}},
              ]
            }
          ]
        };

        myChart.setOption(option);
      }

    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
